import { useMemo, useState } from "react";
import {
  createEffectHook,
  createForm,
  onFieldMount,
  onFormInit,
  onFormSubmit,
  createEffectContext,
} from "../../designer-antd-v5/packages/formily-core/src";
import { FormPath } from "../../designer-antd-v5/packages/formily-core/src";
import { ActionResponse } from "./ActionResponse";

const { provide, consume } = createEffectContext();

export default () => {
  const [response, setResponse] = useState("");

  const target = {
    array: [],
  };
  FormPath.setIn(target, "a.b.c", "value");
  console.log(FormPath.getIn(target, "a.b.c"));

  FormPath.setIn(target, "array.0.a.b.c", "value1");
  console.log(FormPath.getIn(target, "array[0].a.b.c"));
  console.log(FormPath.getIn(target, "array.0.a.b.c"));

  FormPath.setIn(target, "parent.[aa,bb]", [11, 22]);
  console.log(target); //{parent:{aa:11,bb:22}}
  console.log(FormPath.getIn(target, "parent.[aa,bb]")); //[11,22]
  console.log(FormPath.parse("parent.[aa,bb]").toString()); //parent.[aa,bb]

  console.log(FormPath.parse(".dd", "aa.bb.cc").toString()); //aa.bb.dd
  console.log(FormPath.parse("..[].dd", "aa.1.cc").toString()); //aa.1.dd
  console.log(FormPath.parse("..[+].dd", "aa.1.cc").toString()); //aa.2.dd
  console.log(FormPath.parse("..[+10].dd", "aa.1.cc").toString()); //aa.11.dd

  console.log(FormPath.parse("*").match("aa")); //true
  console.log(FormPath.parse("*").match("aa.bb")); //true
  console.log(FormPath.parse("*").match("cc")); //true

  console.log(FormPath.parse("aa.*.cc").match("aa.bb.cc")); //true
  console.log(FormPath.parse("aa.*.cc").match("aa.kk.cc")); //true
  console.log(FormPath.parse("aa.*.cc").match("aa.dd.cc")); //true

  console.log(
    FormPath.parse("aa.*(bb,kk,dd,ee.*(oo,gg).gg).cc").match("aa.bb.cc")
  ); //true
  console.log(
    FormPath.parse("aa.*(bb,kk,dd,ee.*(oo,gg).gg).cc").match("aa.kk.cc")
  ); //true
  console.log(
    FormPath.parse("aa.*(bb,kk,dd,ee.*(oo,gg).gg).cc").match("aa.dd.cc")
  ); //true
  console.log(
    FormPath.parse("aa.*(bb,kk,dd,ee.*(oo,gg).gg).cc").match("aa.ee.oo.gg.cc")
  ); //true
  console.log(
    FormPath.parse("aa.*(bb,kk,dd,ee.*(oo,gg).gg).cc").match("aa.ee.gg.gg.cc")
  ); //true

  console.log(FormPath.parse("*(!aa,bb,cc)").match("aa")); //false
  console.log(FormPath.parse("*(!aa,bb,cc)").match("kk")); //true

  console.log(target);

  const onCustomEvent = createEffectHook(
    "custom-event",
    (payload: any, form: any) => (listener: any) => {
      listener(payload, form);
    }
  );

  const useMyHook = () => {
    // 貌似hook里的onFormSubmit先执行
    const setResponse = consume();
    onFormSubmit(() => {
      setResponse("上下文通讯成功");
    });
  };

  const form = useMemo(
    () =>
      createForm({
        effects() {
          provide(setResponse);
          useMyHook();
          onFormInit(() => {
            setResponse("表单已初始化");
          });
          //   onFormSubmit((form) => {
          //     console.log(form);
          //     setResponse("表单已提交");
          //   });
          onFieldMount("target", () => {
            console.log("target field mounted");
            setResponse("target已挂载");
          });
          onCustomEvent((payload: any, form: any) => {
            setResponse(payload + " Form: " + form.id);
          });
        },
      }),
    []
  );
  return (
    <ActionResponse response={response}>
      <button
        onClick={() => {
          form.submit();
        }}
      >
        Submit
      </button>
      <button
        onClick={() => {
          form.createField({ name: "target" }).onMount();
        }}
      >
        Mount Field
      </button>
      <button
        onClick={() => {
          form.notify("custom-event", "This is Custom Event");
        }}
      >
        Notify
      </button>
    </ActionResponse>
  );
};
